<script setup>
import {reactive, ref, watch} from "vue";
// 1.ref定义的基本类型数据
const a = ref(0)
const stopWatch = watch(a, (newValue) => {
  console.log(newValue) // 例:1
  if (newValue > 10) {
    // 停止监视
    stopWatch()
  }
})
// 2.ref定义的对象类型数据
const b = ref({brand: "宝马"})
watch(b, (newValue) => {
  console.log("这样的话只能监视到") // b.value = {brand:"奔驰"}
  console.log("而监视不到") // b.value.brand = "奔驰"
})
// 开启深度监视可以解决上面的情况
watch(b, (newValue) => {

    },
    {
      deep: true,
      //此配置默认为false，开启后定义完监视后立即执行一次
      immediate: true
    })
// 3.reactive监视的对象类型数据
const c = reactive({brand: "宝马"})
watch(c, (value) => {
  console.log("默认是深层次的监视")
})
// 4.监视对象类型中的某个属性
const d = {brand: "梅赛德斯奔驰", info: {price: 100, quantity: 1000}}
// 直接修改d会影响e的数据显示，但不会触发响应式更新；通过e修改则既会改变数据，也会触发更新。
const e = reactive(d)
// 4.1.监视对象中的基本类型
watch(() => e.brand, (newValue) => {
  console.log("梅赛德斯奔驰变化")
})
// 4.2 监视对象中的对象类型
watch(() => e.info, (newValue) => {
  console.log("监视对象类型")
}, {deep: true})
// 5.监视上述变量组成的数组
watch([a, c, () => d.brand, () => d.info], (newValue) => {

}, {deep: true})
</script>

<template>

</template>

<style scoped>

</style>